<template>
    <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit"
    v-if="newarr"
    >
        <a-tab-pane  :tab="item[0]" v-for="(item,index) in newarr" :key="index" >
            {{ item[1] }}
            <!-- <div ref="editorContainer"></div> -->
        </a-tab-pane>
    </a-tabs>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import { storeToRefs } from "pinia";
import { useEdits } from "../store/edits"
import * as monaco from "monaco-editor"

let edits = useEdits();
let {editsList} = storeToRefs(edits)
let activeKey = ref(0);
let arrlis = JSON.parse(editsList.value.i18n)
let newarr = [] as any;
for(let key in arrlis){
    newarr.push([key,arrlis[key]])
}
const editorContainer = ref<any>(null);
const editor = ref<any>(null);
const editorTheme = ref<string>("vs-dark");
onMounted(() => {
//   editor.value = monaco.editor.create(editorContainer.value, {
//     value: "",
//     theme: editorTheme.value, // 主题
//     language: "javascript",
//     folding: true, // 是否折叠
//     foldingHighlight: true, // 折叠等高线
//     foldingStrategy: "indentation", // 折叠方式  auto | indentation
//     showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
//     // disableLayerHinting: true, // 等宽优化
//     emptySelectionClipboard: false, // 空选择剪切板
//     selectionClipboard: false, // 选择剪切板
//     automaticLayout: true, // 自动布局
//     // codeLens: false, // 代码镜头
//     scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
//     colorDecorators: true, // 颜色装饰器
//     accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
//     lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
//     lineNumbersMinChars: 5, // 行号最小字符   number
//     readOnly: false, //是否只读  取值 true | false
//   });
})


const add = () => {
    console.log("add")
};
const remove = () => {
    console.log("remove")
};
const onEdit = (targetKey: string | MouseEvent, action: string) => {
    if (action === 'add') {
        add();
    } else {
        remove();
    }
};
</script>

<style></style>